<section class="layout" id="wx_message_config">
	<hl-page-header title="消息配置">
		<hl-button type="outline" @on-click="saveConfig" v-if="permissions.indexOf('c106') > -1" class="add-group">保存
		</hl-button>
	</hl-page-header>

	<div class="wx-config-container">
		<div class="row pt-10">
			<div class="col-md-1 pd-0 line-height-34">消息名称：</div>
			<div class="col-md-9 line-height-34">{{info.name | formatUndefined}}</div>
		</div>
		<div class="row">
			<div class="col-md-1 pd-0 line-height-34">描述：</div>
			<div class="col-md-9 line-height-34">{{info.memo}}</div>
		</div>
		<div class="row">
			<div class="col-md-1 pd-0 line-height-34">消息分类：</div>
			<div class="col-md-9 line-height-34">{{info.category === 'BL' ? '账单' : '工作流'}}</div>
		</div>
		<div class="row">
			<div class="col-md-1 pd-0 line-height-34">渠道：</div>
			<div class="col-md-9 line-height-34">
				{{info.channel === 'WX' ? '微信' : info.channel === 'WX_AND_DD' ? '微星,钉钉' : '钉钉'}}</div>
		</div>
		<div class="row">
			<div class="col-md-1 pd-0 line-height-34">消息状态：</div>
			<div class="col-md-9 line-height-34">
				<span class="hl-radio" :class="{active:info.valid === 'Y'}" @click="changeValid('Y')">启用</span>
				<span class="hl-radio" :class="{active:info.valid !== 'Y'}" @click="changeValid('N')">停用</span>
			</div>
		</div>
		<div class="row">
			<div class="message-template">
				<div class="ptb-10 plr-12">
					<div v-html="mesModel" style="textAlign:center"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-1 pd-0 line-height-34">发送对象：</div>
			<div class="col-md-9 line-height-34">{{info.type === 'O' ? '客户' : '员工'}}</div>
		</div>
		<div class="row" v-if="info.type === 'I' && info.category === 'WF'">
			<div class="col-md-1 pd-0 line-height-34">员工清单：</div>
			<div class="col-md-9 line-height-34">工作流</div>
		</div>
		<div class="row clearfix mb-10" v-if="info.type === 'I' && info.category === 'BL'">
			<div class="pull-left">员工清单：</div>
			<div class="pull-right">
				<button class="btn s-btn-default" type="button" name="button" @click="configMember"
					v-if="permissions.indexOf('c108') > -1">配置</button>
			</div>
		</div>
		<!-- 员工列表 -->
		<div class="row" v-if="info.type === 'I' && info.category === 'BL' && users.length">
			<div class="hl-table">
				<div class="tb-title gradient-color">
					<div class="dy-fx-2">姓名</div>
					<div class="dy-fx-4">账号</div>
					<div class="dy-fx-4">电话</div>
					<div class="dy-fx-2">操作</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" :id="item.id" v-for="(item,index) in users">
						<div class="dy-fx-2">{{item.name}}</div>
						<div class="dy-fx-4">{{item.account}}</div>
						<div class="dy-fx-4">{{item.phone}}</div>
						<div class="dy-fx-2"><a @click="showResourceFun(item.id)">资源权限</a></div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 配置员工 -->
	<div class="wkp-pop box-o-shadow pop hide config-member-pop-container" style="width:800px;">
		<div class="head">消息接收人<button class="close wkp-pop-close-btn absolute" @click="hideSelectPerson">×</button>
		</div>
		<div class="content">
			<div class="clearfix mb-20">
				<div class="member-container">
					<p class="member-list mb-10">可添加组员</p>
					<div class="memeber-list box-i-shadow br-4 border sidebar">
						<div class="main selected-member-list" style="height:437px;">
							<div class="approve-person"></div>
						</div>
					</div>
				</div>

				<div class="selected-member-container">
					<p class="selected-list mb-10">已选组员</p>
					<div class="sidebar box-i-shadow br-4 border">
						<div class="nav dy-flex">
							<div class="dy-fx-1">序</div>
							<div class="dy-fx-2">姓名</div>
							<div class="dy-fx-2">账号</div>
							<div class="dy-fx-2">电话</div>
							<div class="dy-fx-1">操作</div>
						</div>
						<div class="main selected-member-list">
							<div class="have-member">
								<ul class="dy-flex selected-member-item" v-for="(item, index) in nodeUser">
									<li class="dy-fx-1">{{ index+1 }}</li>
									<li class="dy-fx-2 ellipsis-1">{{ item.name }}</li>
									<li class="dy-fx-2">{{ item.account }}</li>
									<li class="dy-fx-2">{{ item.phone }}</li>
									<li class="dy-fx-1 delete-member cursor"><span @click="delperson(index)"
											class="icon-Gm-delete"></span></li>
								</ul>
							</div>
							<div class="no-member" v-if="!nodeUser.length">
								<img src="assets/images/wgp-no-member.png" class="no-member-image" alt="暂无组员图">
								<p>暂无组员,请在左侧添加</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ptb-10 text-center">
			<button type="button" class="btn n-btn-primary mr-10 save-wkp" @click="saveSelect">保存</button>
			<button type="button" class="btn n-btn-outline wkp-pop-close-btn" @click="hideSelectPerson">取消</button>
		</div>
	</div>
	<div class="backdrop hide"></div>
	<!-- 资源权限 -->
	<hl-dialog title="资源权限" :visible="resourceFlag" @on-close="resourceFlag = false" width="900">
		<div class="resource_content">
			<div class="l_left">
				<div class="mb-10">可选资源</div>
				<div class="search mb-10">
					<hl-select :data="projectList" v-model="selectedPro" @on-change="selectProFun" type="primary" width="140" class="mr-10"	dropdownHeight="110"></hl-select>
					<hl-select :data="buildingList" v-model="selectedBuild" @on-change="selectBuildFun" type="primary" width="140"	dropdownHeight="110"></hl-select>
				</div>
				<div class="">
					<div class="hl-table">
						<div class="tb-title gradient-color">
							<div class="dy-fx-2">
								<span class="user-select node-event-parent" :class="allFlag?'user-select-active':''" @click="chooseAllResources"></span>
							</div>
							<div class="dy-fx-4">楼层</div>
							<div class="dy-fx-4">单元</div>
						</div>
						<div class="tb-content border-b" style="max-height: 202px;overflow-y: auto;">
							<ul class="dy-flex border-b" v-for="(item,index) in resourcesList">
								<li class="dy-fx-2">
									<span class="user-select node-event-parent" @click="chooseResources(index)" :class="item.isSelect?'user-select-active':''"></span>
								</li>
								<li class="dy-fx-4 ellipsis-1">{{item.floorName}}</li>
								<li class="dy-fx-4 ellipsis-1">{{item.unitName}}</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="r_left">
				<div class="mb-10">已选资源</div>
				<div class="" v-if="info.type === 'I' && info.category === 'BL' && users.length">
					<div class="hl-table border-b">
						<div class="tb-title gradient-color">
							<div class="dy-fx-2">序</div>
							<div class="dy-fx-4">项目</div>
							<div class="dy-fx-4">楼栋</div>
							<div class="dy-fx-4">楼层</div>
							<div class="dy-fx-4">单元</div>
							<div class="dy-fx-2">操作</div>
						</div>
						<div class="tb-content " style="max-height: 243px;overflow-y: auto;">
							<ul class="dy-flex border-b" v-for="(item,index) in haveResources">
								<li class="dy-fx-2">{{index + 1}}</li>
								<li class="dy-fx-4 ellipsis-1">{{item.projectName}}</li>
								<li class="dy-fx-4 ellipsis-1">{{item.buildingName}}</li>
								<li class="dy-fx-4 ellipsis-1">{{item.floorName}}</li>
								<li class="dy-fx-4 ellipsis-1">{{item.unitName}}</li>
								<li class="dy-fx-2"><a @click="delResourcesItem(index)">删除</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div slot="footer">
			<hl-button type="primary" @on-click="sureAddResources">确认</hl-button>
			<hl-button type="outline" @on-click="resourceFlag = false">取消</hl-button>
		</div>
	</hl-dialog>
</section>

<script src="modules/flow/scripts/approve.js" charset="utf-8"></script>
<script src="modules/wx_message/scripts/message_config.js" charset="utf-8"></script>


<style media="screen">
	.tb-content li{
		text-align: center;
		line-height: 40px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.search{
		display: flex;
	}
	.resource_content {
		display: flex;
		height: 312px;
	}

	.l_left {
		width: 35%;
		margin-right: 5%;
		font-size: 14px;
	}

	.r_left {
		width: 60%;
		font-size: 14px;
	}

	.approve-person .approve-top {
		height: 50px;
		width: 100%;
		background: rgba(241, 241, 241, 1);
		display: flex;
		text-align: center;
	}

	.approve-person .approve-top .approve-tab {
		flex: 1;
		position: relative;
		line-height: 50px;
	}

	.approve-tab-active {
		color: #565E99;
	}

	.approve-tab-active:before {
		content: '';
		position: absolute;
		bottom: 0;
		width: 60px;
		height: 2px;
		background: rgba(86, 94, 153, 1);
	}

	.approve-node {
		text-align: left;
		padding-left: 15px;
	}

	.node-children-name {
		line-height: 40px;
		height: 40px;
		padding-left: 5px;
	}

	.user-select {
		cursor: pointer;
		width: 16px;
		height: 16px;
		margin-top: 12px;
		border-radius: 4px;
		border: 1px solid #ddd;
		display: inline-block;
		vertical-align: top;
	}

	.user-select-active {
		background-image: url(assets/images/Check.png);
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		background-color: #5e67a5;
		border-color: #5e67a5;
	}

	.check-auth {
		width: 13px;
		height: 13px;
		position: relative;
		border: 1px solid #666;
		border-radius: 4px;
	}

	.check-auth-active {
		background-image: url(assets/images/Check.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 8px;
		background-color: #5e67a5;
		width: 13px;
		height: 13px;
		border: 1px solid #5e67a5;
		border-radius: 4px;
	}

	.auto-close {
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}

	.auth-project {
		width: 900px;
		background: #fff;
		border-radius: 6px;
		position: relative;
	}

	.cz-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mark-auth-project {
		background: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
